<template>
    <div class="body">
        <h1 style="text-align: center;">错题集</h1>
        <el-card class="box-card" v-for="item in state.wrongQuestions" :key="item.id">
          <template #header>
              <div class="card-header">
                <el-popover
                    placement="top-start"
                    title="答案"
                    :width="200"
                    trigger="hover"
                    :content="item.answer_front"
                >
                    <template #reference>
                       
                        <el-button style="primary" size="small" class="m-2" @click="onClickViewAnswer(item)">查看解析</el-button> 
                    </template>
                </el-popover>
                        
              </div>
            </template>
            <div class="card-body">              
                <div v-html="item.content_front" class="line-break"></div>
                <el-image v-for="url in item.images" :key="url" :src="url" style="'width: 400px;'" />  
                
            </div>
            
      </el-card>
      <el-pagination
            background
            layout="total, pre, pager, next"
            :total="state.total"                
            :page-size="state.pageSize"            
            @current-change="handleCurrentChange"
        />
        <el-dialog
            v-model="state.dialogVisible"
            title="解析"
            width="60%"
        >
            <p>【答案】</p>
            <div v-html="state.viewExplainItem.answer_front" class="line-break"></div>
            <el-image v-for="url in state.viewExplainItem.images_answer" :key="url" :src="url" style="'width: 400px;'" />
            <p>【解析】</p>
            <div v-html="state.viewExplainItem.explain_front" class="line-break"></div>
            <el-image v-for="url in state.viewExplainItem.images_explain" :key="url" :src="url" style="'width: 400px;'" />   
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="state.dialogVisible = false">关闭</el-button>                   
            </span>
            </template>
        </el-dialog>
    </div>   
</template>
  
<script setup>
import {reactive, onMounted} from 'vue'
import axios from '@/utils/axios'
import { localGet} from '@/utils'
import { ElMessage } from 'element-plus'
const state = reactive({
    dialogVisible:false,
    content: '',
    userWrongQuestions:[],
    wrongQuestions:[],
    total: 0, // 总条数
   currentPage: 1, // 当前页
   pageSize: 10, // 分页大小
   viewExplainItem:{},
})

const user_info=localGet('user_information')
// 打开弹窗
const onClickViewAnswer=(item)=>{
    state.viewExplainItem=item
    state.dialogVisible=true
}
// 获取所有该用户的错题
const getWrongQuestion=()=>{
    let params={
        page: state.currentPage,
        size: state.pageSize,  
    }
    axios.get(`/questions/get_wrong_for_owner/`,{params}).then(res => {
      console.log("该用户的所有错题：",res)
      if (res.code==200){
        state.userWrongQuestions = res.data.results
        state.wrongQuestions=state.userWrongQuestions.map(item=>item.question_info)
        state.total=res.total
        console.log('错题id',state.wrongQuestions)
      }else{
        ElMessage.error("获取你的错题失败")
      }
    })
    .catch((error)=>{
      console.log("获取收藏题目错误", error)
    })   
}
onMounted(()=>{
    getWrongQuestion()
})
//点击页码时触发
const handleCurrentChange = (newPage)=>{
    state.currentPage = newPage 
    getWrongQuestion()
}
 
</script>
<style scoped>
.body{
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: space-evenly;
    overflow-y: auto;
    margin:0;
    padding:0;
    width: 900px;
}
</style>